<template>
  <div class="container">
    <title-head1 :title="'各省充电交易额排行(今日)'"></title-head1>

    <transition-group name="list" tag="div" class="group">
      <div class="item"
           v-for="(item,index) in data"
           :key="item.name">
        <div style="display: flex;justify-content: space-between">{{ item.name }}
          <div :style="{color:index==0?'#F3D954':index==1?'#1DF0F3':'#fff'}">{{ item.value }}元</div>
        </div>
        <progress  max="10000" :value="item.value"></progress>

      </div>
    </transition-group>
      </div>
</template>

<script setup lang="ts">
import TitleHead1 from "@/components/TitleHead1.vue";
import {ref, onMounted, onBeforeUnmount} from "vue";

const data = ref<any>([
  {name: '湖北', value: 5363.34},
  {name: '浙江', value: 4183.2},
  {name: '河北', value: 4008.82},
  {name: '四川', value: 3545.7},
  {name: '湖南', value: 999.65}
]);
let updateTimer: any = null;


const updateValues = () => {
  const newData = [...data.value]
    .map(item => ({
      ...item,
      value: Math.floor(Math.random() * 10000)
    }))
    .sort((a, b) => b.value - a.value);
  
  // 强制触发重新排序动画
  data.value = newData

}
onMounted(() => {
  updateTimer = setInterval(updateValues, 2000);
});

onBeforeUnmount(() => {
  clearInterval(updateTimer);
});
</script>

<style scoped>


.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 10px 0; /* 设置上下边距 */
}

.group {
  height: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: #0A1A4C;
  padding: 10px 20px;
  overflow: hidden;
  position: relative;
}

.item {
  height: calc(20%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.5s ease;
}

progress {
    width: 100%;
    height: 10px;
    margin-top: 3px;
    border-radius: 12px;
}

progress::-webkit-progress-bar {  /* 新增伪元素选择器 */
    background-color: rgba(26, 56, 82, 1);
    border-radius: 12px;
}

progress::-webkit-progress-value {
    background: linear-gradient(to right, 
        rgb(23,91,255), 
        rgb(32,253,254));
    border-radius: 12px;
}

progress::-moz-progress-bar {
    background: linear-gradient(to right, 
        rgb(23,91,255), 
        rgb(32,253,254));
    border-radius: 12px;
}


.list-move {
  transition: transform 0.5s ease;
}
.list-enter-active {
  transition: all 0.5s ease;
  position: absolute;
}
.list-leave-active {
  transition: all 0.5s ease;
  position: absolute;
}
</style>
